• HTML
  • CSS
  • JS

    Temas HTML

  • Estructura

  • Texto

  • Etiquetas Generales

  • Listas

  • Metadatos

  • Representar código

  • Multimedia

  • Eventos

  • Formularios

  • Validaciones

  • Envío de Datos

  • Controladores JS

  • Pre-Carga

  • Recordatorios

Tablas HTML

A lo largo de la historia las tablas tuvieron un rol muy importante en el desarrollo y estructura de la web, aún hoy son una excelente forma de representar o comparar contenido, por lo que HTML cuenta con una serie de etiquetas estructurales diseñadas específicamente para estructurar tablas, estas etiquetas son:

Table

Esta se trata de la etiqueta contenedora de la tabla en sí, marca su inicio y final, todos los elementos de esta se deben incluir en su interior.

Una recomendación a la hora de crear tablas es incluir una etiqueta "caption" en su interior, esta actúa como el título de la tabla, es beneficioso para que los usuarios puedan reconocer el contenido de la página rápidamente, esto incluye a los usuarios con problemas visuales que utilicen motores de lectura, por ello es que se recomienda que el título sea una descripción del contenido y que se coloque este elemento directamente debajo de la etiqueta "table" (fuera de la estructura de las celdas).

TD

Este elemento define las celdas de la tabla, dentro de esta etiqueta se encuentra el contenido de la misma, ya sea otros elementos HTML o algún texto, un aspecto positivo de las tablas es que cualquier otro elemento puede ser albergado en sus celdas, una característica de las celdas es que por defecto cada celda nueva se ubicará a la derecha de la anterior en la misma fila.

Tr

Las tablas se estructuran en base a las filas de la misma, el elemento "tr" almacena en su interior todas las celdas que pertenezcan a una misma fila, por lo tanto cada fila es un conjunto de código independiente de otras filas, dentro de este elemento se mantiene la característica de que las nuevas celdas que se añadan se insertarán de izquierda a derecha.

Th

Este elemento define los encabezados de la tabla, básicamente funciona de la misma forma que lo hace una celda común con el extra de incluir un poco de estilos al texto que se encuentra en el interior, esto ya que se visualiza por defecto en negritas, con el fin de resaltar los encabezados del resto de la información de la tabla, también incluye el atributo "scope" el cual permite mejorar la accesibilidad de la tabla, ya que vincula un encabezado con sus respectivos datos de la misma fila o columna, por lo tanto los lectores web pueden trabajar adecuadamente.

Profundizando en las Tablas

Colspan y Rowspan

Estos atributos se utilizan para aquellos casos en los que queramos que una celda ocupe más de una columna o más de una fila, ambos atributos trabajan con un valor numérico sin decimales, el cual es igual al número de filas o columnas que se desea que ocupe la celda, por lo tanto:

  • Colspan: Define el número de columnas que una celda puede ocupar

  • Rowspan: Define el número de filas que una celda puede ocupar

  • Nota: se pueden usar ambos atributos a la vez sin problema alguno

Tablas y los estilos CSS

En una tabla también es posible incorporar los estilos y clases CSS, sin embargo hacerlo de forma tradicional no es eficiente, ya que una tabla al estar constituida por numerosos elementos internos sería necesario definir el estilo o una clase en cada uno, para simplificar esta tarea existen los elementos "col" y "colgroup", esto tiene la función de definir cuáles elementos tendrán qué estilos.

Su forma de uso consiste en el elemento "colgroup" actuando de contenedor del elemento "col", por otra parte el "col" actúa vinculando el estilo a una serie de celdas, "col" se define en base a la posición que tengan las celdas en sus respectivas filas, es decir:

Para las primeras celdas de las filas se utiliza un "col", para las segundas un segundo "col", otro para las terceras y así sucesivamente, si en algún momento quisiéramos que a alguna serie de celdas no se le aplique un estilo igualmente es necesario incluir su respectivo elemento "col" pero dejándolo vacío para de ese modo seguir llevando la correlatividad de las celdas, ya que de lo contrario se le aplicarían los estilos de otras a estas.

Un ejemplo de esto es:

El resultado de este código es el siguiente:

Nota: Se pueden usar los atributos colspan y rowspan en el elemento "col" perfectamente.

Si se quiere añadir el estilo a las dos tablas sería de la siguiente manera:

Nota: "span" también adopta un valor numérico sin decimales.

Nota: Si se diera el caso de querer dejar una columna vacía se puede usar el código de símbolo especial " ", este al ser interpretado muestra una celda vacía.

Nota: En la actualidad no es recomendable emplear tablas para estructurar la página web, esta es una vieja práctica que se utilizaba cuando CSS tenía mala compatibilidad con los navegadores, actualmente esto es completamente contraproducente ya que se obtiene un código más limpio, un contenido más semántico y mejores diseños con la implementación de CSS en la página, así como con el uso de los contenedores semánticos y no semánticos.

Añadir estructura a las Tablas

Thead

Este elemento es el que define la cabecera de la tabla, en otra palabra alberga todos los encabezados de las columnas aunque en ocasiones dependiendo de la tabla se pudiesen incluir otros elementos en la cabecera.

Nota: si se utilizan los elementos "col" y "colgroup" la cabecera debe de ir justo debajo.

Tbody

Esta etiqueta es la que define cuál será el cuerpo de la tabla, por lo tanto es el lugar en el que se encontrará la mayor parte del contenido, básicamente todo lo que no se encuentre en la cabecera o en el pie de tabla se encuentra en el cuerpo, en código, debido a la cantidad del contenido, pudiese crearse y ubicarse al último (después y por debajo de thead y tfoot) ya que siempre que esté dentro de un elemento "table" se visualizará en el lugar correcto.

Nota: Tbody aún si no es definido en el código los navegadores lo incluyen por defecto, es bueno definirlo uno mismo para tener mejor control sobre la estructura y los estilos de la tabla.

Tfoot

Este último elemento cumple con la función de definir el pie de tabla, pudiese por ejemplo tratarse de la última fila la cual pudiese contener datos de las filas anteriores, una característica de esta etiqueta es que en código se puede crear antes que el cuerpo de la tabla ya que siempre que se encuentre dentro de un elemento "table" se visualizará en el lugar correcto.

Nota: Un ejemplo de uso de estas etiquetas para aplicar estilos CSS sería: definir que tanto la cabecera como el pie de tabla se repitan en cada página que se muestre, y que el cuerpo de la tabla se muestre en una sola página, pudiendo desplazarte por él con una barra de desplazamiento.

Buenas y Malas Prácticas

Malas Prácticas

Anidar tablas: Como se ha dicho anteriormente las tablas pueden contener casi cualquier elemento dentro de estas, incluyendo otras tablas siempre y cuando estas tengan la estructura completa (table), a esto es a lo que se le conoce como "anidar", sin embargo el poner una tabla dentro de otra no es una práctica recomendable ya que da como resultado una estructura que puede ser difícil de entender para los usuarios y para los motores de lectura, por lo tanto lo mejor es únicamente hacerlo en los casos que sea estrictamente necesario, ya que en el resto de los casos es probable que con "colspan" y "rowspan" se obtengan mejores resultados.

Buenas Prácticas

  • Usar encabezados de columna y de fila: Esto es recomendable ya que ayuda a que los usuarios puedan interpretar de mejor forma los datos de la tabla, esto aplica incluso para los usuarios con problemas visuales, esto ya que por lo general estos utilizan motores de lectura para interactuar con la página, para un motor de lectura interpretar una tabla puede resultar complejo, sin embargo al incluir los encabezados el motor y por lo tanto el usuario pueden interpretar la tabla de una forma similar a como lo hace alguien sin problemas visuales.

  • Elemento "caption": como ya se ha dicho anteriormente es muy recomendable incluir un título para la tabla, ya que ayuda al usuario a descubrir si la tabla le será de utilidad.

  • Usar el atributo "scope": Este atributo se utiliza en los elementos "th" e indica a los motores de lectura qué encabezado pertenece a qué fila o columna con el fin de que le permitan a sus usuarios leer todas las celdas del encabezado de una vez, esto lo hace a través de dos valores: "col" (columna) y "row" (fila) como lo hacen en estos ejemplos:

    Scope también posee dos atributos más, "colgroup" y "rowgroup", estos valores definen aquellos casos en los que un encabezado ocupe más de una celda a la vez, por lo tanto se utilizan en los casos que el encabezado abarque dos o más columnas o filas.

  • Atributos "id" y encabezados: Estos atributos tienen una función alternativa al uso del "scope", su forma de uso consiste en asignarle un id único a cada elemento "th", por otro lado se le asigna un atributo "headers" a todos los elementos "td", el "headers" debe de contener una lista (separada por espacios) del id de todos los elementos que actúan como encabezado en esta celda sin importar si pertenecen a una fila o columna, de esta forma se define la posición explícita de cada celda.

    Nota: para que este método funcione adecuadamente se necesitan encabezados de columna y de fila.

Contacto

¿Quién soy?

Mi nombre es Carlos Miguel Puche Moreno, estoy estudiando programación web de forma autodidacta, si quieres saber más visita mi perfil de GitHub haciendo clic en mi fotografía, o visita mis redes sociales:

Redes

Currículum